<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>将军的分类实验</title>
		<style>
			.d3 {height: 1000px;
			border: 30px solid #da273f ;
			border-right-style: double;
			border-left-style:dashed;
			border-top-style: dotted;
			border-bottom-style: solid;
			width: 1000px;
			}
			#a4{height: 1000px;
			border: 30px solid #9e75e8 ;
			border-left-width: 30px;
			border-right-width:20px;
			border-top-right-radius: 30px;
			border-bottom-width:15px;
			border-top-width:10px;
			width: 1000px;
			}
			.d4{height: 1000px;
			width: 1000px;
			border: 30px solid #90baff;
			border-radius: 1000px 1000px 1000px 1000px;
			box-shadow:0 0 0 15px #9e75e8,
			0 0 0 30px #da273f;}
			.d5{
			}
			.d6{height: 1000px;
			width: 1000px;
			border: 30px solid #e29a77;
			}
			.d7{height: 1000px;
			border: 30px solid #90baff ;
			border-right-color: #bfbfbf;
			border-left-color:#ff55ff ;
			border-top-color: #ff5500;
			border-radius: 1000px 1000px 1000px 1000px;
			width: 1000px;
			transition:transform .8s;/*过渡属性 减速*/
			}
			.d7:hover{
				transform: rotate(180deg);/*旋转指令*/
			}
		</style>
	</head>
	<body>
		<div class="d7"></div class="d7">
		<div class="d2 d3"></div class="d2 d3">
		<div id="a4"></div id="a4">
		<div class="d4"></div class="d4">
		<div class="d5"></div class="d5">
		<div class="d6"></div class="d6">
	</body>
</html>